import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Loading from '@kuiper-components/loading';
import NumInfo from './NumInfo';
import ChartBox from './ChartBox';
import s from './ServiceOverview.module.css';
import Helper from '../../../components/Helper';

const TOOLTIP_TEXTS = {
	vul: {
		label: 'Web漏洞数',
		overlay: '所有资产最新Web漏洞监测任务发现的威胁数',
		to: '/job-manage/web-task',
	},
	securityEvent: {
		label: '安全事件数',
		overlay: '所有资产最新安全事件监测任务发现的事件数',
		to: '/job-manage/web-task',
	},
	content: {
		label: '内容违规数',
		overlay: '所有资产最新内容违规监测任务发现的内容违规数',
		to: '/job-manage/web-task',
	},
	changeCheck: {
		label: '篡改数',
		overlay: '所有资产最新篡改监测任务发现的篡改事件数',
		to: '/job-manage/web-task',
	},
	availability: {
		label: '可用性任务异常数',
		overlay: '所有资产最新可用性监测任务发现有异常的任务数。',
		to: '/job-manage/aviliable-task',
	},
};
export default function ServiceOverview({
	className,
	taskInfo,
	jobInfo,
	loading,
	planData,
}) {
	const resD = JSON.parse(sessionStorage.resD);
	const [toolTip, setToolTip] = React.useState(TOOLTIP_TEXTS);
	React.useEffect(() => {
		const toolTip_ = toolTip;
		if (planData.host_job_count > 0) {
			toolTip_.hostVul = {
				label: '主机漏洞数',
				overlay: '主机监测任务发现有异常的任务数。',
				to: '/job-manage/host-task',
			};
		}
		toolTip_.availability.to =
			taskInfo.http > taskInfo.ping
				? '/job-manage/aviliable-task'
				: '/job-manage/aviliable-task';
		setToolTip(toolTip_);
	}, [planData]);

	return (
		<Loading hasData show={loading}>
			<div className={cn(className, s.serviceOverview)}>
				<div className={s.title}>
					风险概览
					<Helper
						placement="top"
						overlay={'所有资产各监测项最新任务风险结果数据统计'}
					/>
				</div>
				<div className={s.content}>
					<div className={s.numContainer}>
						{Object.keys(TOOLTIP_TEXTS).map((e, i) => {
							const feature = resD.feature;
							let isShow = false;
							if (e === 'vul') {
								if (feature.vulManualTask || feature.vulTask) {
									isShow = true;
								}
							} else if (e === 'securityEvent') {
								if (
									feature.securityEventManualTask ||
									feature.securityEventTask
								) {
									isShow = true;
								}
							} else if (e === 'availability') {
								if (feature.httpTask || feature.pingTask) {
									isShow = true;
								}
							} else if (e === 'content') {
								if (feature.contentManualTask || feature.contentTask) {
									isShow = true;
								}
							} else if (e === 'changeCheck') {
								if (feature.changeCheckTask) {
									isShow = true;
								}
							} else if (e === 'hostVul') {
								isShow = true;
							}
							return (
								<NumInfo
									isShow={isShow}
									key={i}
									info={taskInfo[e] || 0}
									label={TOOLTIP_TEXTS[e].label}
									name={e === 'hostVul' ? 'vul' : e}
									to={TOOLTIP_TEXTS[e].to}
									overlay={TOOLTIP_TEXTS[e].overlay}
								/>
							);
						})}
					</div>
					<hr className={s.cutLine} />
					<ChartBox jobInfo={jobInfo} type={0}></ChartBox>
					{planData.host_job_count > 0 && (
						<ChartBox jobInfo={jobInfo} type={1}></ChartBox>
					)}
				</div>
			</div>
		</Loading>
	);
}

ServiceOverview.propTypes = {
	className: PropTypes.string,
	loading: PropTypes.bool,
	taskInfo: PropTypes.any,
	jobInfo: PropTypes.any,
	planData: PropTypes.any,
};

ServiceOverview.defaultProps = {
	className: s.serviceOverview,
	loading: true,
};
